<template>
    <div>
      <van-sticky>
        <div class="demo-nav" style>
          <div class="demo-nav__title">施工队支付</div>
          <router-link :to="'/DecorationProcess'" class="demo-nav__back">
            <svg viewBox="0 0 1000 1000">
              <path fill="#969799" fill-rule="evenodd"
                    d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z">
              </path>
            </svg>
          </router-link>
        </div>
        <van-notice-bar
          style="font-size: 1.5rem"
          left-icon="volume-o"
          text="点住商品左滑去支付。"
        />
      </van-sticky>

      <div v-for="item in lsit">
      <van-swipe-cell>
        <van-card
          :price="item.instalmentPice"
          :desc="item.constructionName"
          :title="item.labelName"
          class="goods-card"
          :thumb="item.conUrl"
        />
        <template #right>
          <van-button square text="支付" type="danger" @click="aaa(item.instalmentId)" class="delete-button" />
        </template>
      </van-swipe-cell>
      </div>
    </div>
</template>

<script>
  import { findAllListById } from "@/api/customer/instalment";

  export default {
        name: "shigongdui",
      data(){
        return{
          lsit:[]
        }
      },
      created() {
        this.getList();
      },
      methods: {
        getList(){
          findAllListById().then(res=>{
            this.lsit = res.data
          })
        },

        aaa(instalmentId){
          this.$router.push({
              path: "/PaymentDetailsTwo",
              query: {instalmentId: instalmentId}
            }
          );
        }

      }

    }
</script>

<style scoped>
  .goods-card {
    margin: 0;
    background-color: @white;
  }

  .delete-button {
    height: 100%;
  }

  .demo-nav {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    height: 3.2rem;
    background-color: #fff;
  }

  .demo-nav__title {
    font-weight: 350;
    font-size: 1.2rem;
    text-transform: capitalize;
  }

  .demo-nav__back {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
</style>
